<!--客服聊天界面-->
<template>
    <div class="word">
        <!-- 导航栏 -->
        <van-nav-bar title="瓜夕夕客服" left-text="返回" left-arrow fixed @click-left="onClickLeft"></van-nav-bar>
        <div class="myword" id="wordUl">
            <ul class="word_ul clearfloat" id="word_ul">
                <!--这是放用户发送的消息-->
            </ul>
            <div class="word_foot">
                <van-icon size="25px" name="volume-o" />
                <input type="text" v-model="val" id="message"/>
                <van-icon size="25px" name="smile-o" />
                <button @click="sendBtn">发送</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            val:"",
            adminname:"admin",          
        }
    },
    sockets:{
        //监听聊天的消息
        receviceMessage(data){
            //把接收到的消息显示到聊天窗口
            if(data.username===this.$store.state.username){
                //自己的消息
                this.$store.state.userlist.push(data.msg)
                let myright=document.getElementById("word_ul")
                let div=document.createElement("div")
                div.innerHTML=`
               <li class="word_right_li clearfloat">
                    <img class="right_img" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                    <div class="word_right_d">
                        <p>${data.username}</p>
                        <p>${data.msg}</p>
                    </div>
                </li>`;
                myright.appendChild(div)
                // console.log(this.$store.state.userlist)
            }else{
                //别人的消息
                this.$store.state.adminlist.push(data.msg)
                let otherleft=document.getElementById("word_ul")
                let div=document.createElement("div")
                div.innerHTML=`
                <li class="word_left_li clearfloat">
                    <img class="left_img" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                    <div class="word_left_d">
                        <p>${data.username}</p>
                        <p>${data.msg}</p>
                    </div>
                </li>`;
                otherleft.appendChild(div)
            }
            //实现消息一直在最底部
            let wordUl=document.getElementById("wordUl")
            wordUl.scrollTop = wordUl.scrollHeight;
            localStorage.setItem(data.username,this.$store.state.userlist)
            localStorage.setItem(this.adminname,this.$store.state.adminlist)
        },
    },
    methods:{
        onClickLeft(){
            //后退到之前页面
            history.back()
        },
        //点击发送按钮发送消息给服务端
        sendBtn(){
            if(!(this.$store.state.islogin)){
                this.$toast.fail("您还没有登录哟！");
                return
            }else{
                if(this.val.trim()!==""){
                    this.$socket.emit('sendword',{
                        msg:this.val,
                        username:this.$store.state.username,
                        //单独发送给客服
                        to:"admin"
                    });
                    this.val='';
                    message.focus();  //输入完后继续获得焦点
                    sessionStorage.setItem('issend', 'true');
                }
            }
        }
    },
    mounted() {
        this.$socket.emit("weallist",{
            user:this.$store.state.username,
        })
        var usernameval=localStorage.getItem(this.$store.state.username)
        if(usernameval){
            usernameval=usernameval.split(',')
            for(var i=0;i<usernameval.length;i++){
                //自己的消息
                let myright=document.getElementById("word_ul")
                let div=document.createElement("div")
                div.innerHTML=`
                <li class="word_right_li clearfloat">
                    <img class="right_img" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                    <div class="word_right_d">
                        <p>${this.$store.state.username}</p>
                        <p>${usernameval[i]}</p>
                    </div>
                </li>`;
                myright.appendChild(div)
            }
        }
        //别人的消息
        var adminval=localStorage.getItem(this.adminname)
        if(adminval){
            adminval=adminval.split(',')
            for(var i=0;i<adminval.length;i++){
                let otherleft=document.getElementById("word_ul")
                let div=document.createElement("div")
                div.innerHTML=`
                <li class="word_left_li clearfloat">
                    <img class="left_img" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                    <div class="word_left_d">
                        <p>${this.adminname}</p>
                        <p>${adminval[i]}</p>
                    </div>
                </li>`;
                otherleft.appendChild(div)  
            }
        }
    },

}
</script>

<style>
.word .van-nav-bar{
    background-color: rgb(86, 206, 132);
}

.word .van-nav-bar__title{
    color: aliceblue;
}
.word .van-nav-bar__text{
    color: aliceblue;
}

.word .myword{
    position: fixed;
    width: 100%;
    top:40px;
    bottom: 60px;
    overflow-y:scroll;
    background: rgb(241, 241, 241);
}
.word .myword .word_ul{
    margin-top: 2%;
    padding: 3%;
}

.word .myword .word_left_li{
    width: 100%;
    /* height: 30px; */
    margin-bottom: 20px;
    position: relative;
}
.word .myword .word_right_li{
    width: 100%;
    /* height: 30px; */
    margin-bottom: 20px;
}

.word .myword .left_img{
    float: left;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.word .myword .right_img{
    float: right;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.word .myword .word_left_d{
    margin-left: 3%;
    float: left;
    max-width: 63%;
    margin-top: 15px;
}
.word .myword .word_right_d{
    margin-right: 3%;
    float: right;
    max-width: 63%;
    margin-top: 15px;
}

.word .myword .word_left_d >:first-child{
    font-size: 6px;
    position: absolute;
    top:2px;
}
.word .myword .word_left_d >:last-child{
    font-size: 16px;
    position: absolute;
    top: 20px;
    border: 1px solid rgb(231, 224, 224);
    border-radius: 5px;
    padding: 5px;
    line-height: 1.5em;
}
.word .myword .word_right_d >:first-child{
    font-size: 6px;
    text-align: right;
    position: relative;
    top: -20px;
}
.word .myword .word_right_d >:last-child{
    font-size: 16px;
    line-height: 1.5em;
    position: relative;
    top: -12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

.word .myword .word_left_d >:last-child::before{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    overflow: hidden;
    border: 5px solid transparent;
    border-right-color: rgb(87, 84, 84);
    left: -11px;
    top:6px;
}
.word .myword .word_left_d >:last-child::after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    overflow: hidden;
    border: 5px solid transparent;
    border-right-color: #fff;
    left: -11px;
    top:6px;
}
.word .myword .word_right_d >:last-child::before{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    overflow: hidden;
    border: 5px solid transparent;
    border-left-color: rgb(87, 84, 84);
    right: -11px;
    top:6px;
}
.word .myword .word_right_d >:last-child::after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    overflow: hidden;
    border: 5px solid transparent;
    border-left-color: #fff;
    right: -11px;
    top:6px;
}
/*清除浮动*/
.clearfloat::after{
    content:"\200B";
    display:block;
    height: 0;
    clear: both;
}
.clearfloat{
    *zoom: 1;
}
.word .word_foot{
    padding: 10px 0 15px 0;
    display: flex;
    background-color:#E0E0E0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}


.word .word_foot >:nth-child(1){
    padding: 5px 10px;
}
.word .word_foot >:nth-child(3){
    padding: 5px 10px;
}
.word .word_foot input{
    border-radius: 5px;
    border: none;
    width: 60%;
}

.word .word_foot button{
    background: #56CE84;
    border: none;
    width: 3em;
    border-radius: 5px;
    color: #fff;
}
</style>
